<template>
	<nav-header title="平台详情">
    <view class="bg-white mb-4">
      <u-swiper :list="projectObj.imageList" height="190" @change="e => currentNum = e.current" indicatorStyle="left: 20px"
                :autoplay="false" radius="0" @click="swiperClick">
        <view slot="indicator" class="indicator-num">
          <text class="indicator-num__text">{{ currentNum + 1 }}/{{ projectObj.imageList.length }}</text>
        </view>
      </u-swiper>
      <view class="px-4 pb-6">
        <view class="flex justify-between items-center py-3 border-b-ee">
          <view class="flex items-center flex-1 mr-4">
            <text class="text-black-33 font-bold text-lg pr-2" v-text="projectObj.name"></text>
          </view>
        </view>

        <view class="flex justify-between items-center mb-2_5">
          <view style="width: calc(100% - 60px);" class="flex pr-2">
            <text class="text-gray-99">联系电话：</text>
            <text class="text-black-33 flex-1" v-text="projectObj.phone || ''"></text>
          </view>

        </view>
        <view class="flex justify-between items-center mb-2_5">
          <text class="text-gray-99">联系邮箱：</text>
          <text class="text-black-33 flex-1" v-text="projectObj.email || ''"></text>
        </view>
      </view>
    </view>
    <view class="bg-white px-4 mb-4">
      <view class="py-3 border-b-ee text-black-33 font-bold text-lg">平台介绍</view>
      <view class="py-4">
        <view class="mb-2">
          <text v-text="projectObj.introduce || ''"></text>
        </view>

      </view>
    </view>
    <view class="bg-white px-4 mb-4">
      <view class="py-3 border-b-ee text-black-33 font-bold text-lg">设备配套</view>
      <view class="py-4">
        <text class="pb-2" v-text="projectObj.assorted || '暂无'"></text>
      </view>
    </view>
    <view class="bg-white px-4 pb-4 mb-4">
      <view class="py-3 border-b-ee text-black-33 font-bold text-lg">服务方向</view>
      <view class="pt-4 leading-7" v-text="projectObj.serve || '暂无'"></view>
    </view>
    <view class="bg-white px-4 pb-4 mb-4">
      <view class="py-3 border-b-ee text-black-33 font-bold text-lg">服务平台</view>
      <view class="pt-4 leading-7" v-text="projectObj.serveProject || '暂无'"></view>
    </view>
    <view class="bg-white px-4 pb-6 mb-4">
      <view class="py-3 border-b-ee text-black-33 font-bold text-lg">平台详情</view>
      <u-parse :content="projectObj.content" :selectable="true"></u-parse>
    </view>
    <view class="bg-white w-full py-4 fixed bottom-0 z-50 shadow-lg">
      <view class="flex items-center mx-5">
        <view class="text-center mr-8">
          <i class="iconfont icon-fenxiang block text-xl text-color-a0"></i>
          <text class="text-gray-99 text-sm">分享</text>
        </view>
        <view  class="flex items-center justify-center flex-1 py-2_5 rounded-full text-white mx-1 bg-green-900"
               @click="phoneCall">电话联系</view>
        <view  class="flex items-center justify-center flex-1 py-2_5 rounded-full text-white mx-1 bg-theme  "
               @click="$util.myNavigateTo('/pages_mine/edit_user?businessType=companyProjectApply&businessId='+projectObj.id+'&businessName='+projectObj.name)">使用申请</view>
      </view>
    </view>
	</nav-header>
</template>

<script>
	import NavHeader from '@/components/nav_header.vue'
	import * as unionApi from '@/interface/junchuang/union.js'
  import {mapState} from 'vuex'

  export default {
		components: {
			NavHeader
		},
		data() {
			return {
				id: '',
        currentNum: 0,
        projectObj: this.initObj({})
			}
		},
    computed: {
      ...mapState({
        user: state => state.user,
      })
    },
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
      this.$util.openShare();
      const v = this
			unionApi.getCompanyProjectDetail(this.id).then(res=>{
				if (res.success) {
          console.log("res.data",res.data)
					Object.assign(this.projectObj, res.data)
          if (v.projectObj.fileList.length > 0) {
            v.projectObj.fileList.forEach(file=>{
              v.projectObj.imageList.push(v.$util.formatImageIdUrl(file.id))
            })
          }else {
           /* v.projectObj.imageList.push(v.$config.server_pic_url + 'site_bg.jpg')*/
          }
				}
			})
		},
		methods: {
      swiperClick (index) {
        this.$util.picPreview(index, this.projectObj.imageList)
      },
      phoneCall () {
        const v = this
        if (!v.projectObj.phone) return
        if (v.platform == 'ios') {
          call()
        }else {
          wx.showActionSheet({
            itemList: [v.projectObj.phone,'呼叫'],
            success:function(res){
              if(res.tapIndex==1){
                call()
              }
            }
          })
        }
        function call() {
          wx.makePhoneCall({
            phoneNumber: v.projectObj.phone
          })
        }
      },
			initObj ({companyLogo, companyId, imageList=[], companyName, name, content, businessScope,serve,serveProject, cover, address, phone}) {
				return {companyLogo, companyId, imageList,companyName, name, content, businessScope,serve,serveProject, cover, address, phone}
			}
		}
	}
</script>

<style lang="scss">
page{
  background-color: #f7f7f7;
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #FFFFFF;
    font-size: 12px;
  }
}

.greenGradient {
  background: #69ca7b;
  background: -webkit-linear-gradient(to bottom,#69ca7b,#5aad6b);
  background: linear-gradient(to bottom,#69ca7b,#5aad6b);
}

.blueGradient {
  background: #1fb3e7;
  background: -webkit-linear-gradient(to bottom,#1fb3e7,#3983ff);
  background: linear-gradient(to bottom,#1fb3e7,#3983ff);
}
</style>
